<template>
	<view class="container">
		<view class="content">
			<view class="list">
				<view class="item" v-for="(item,index) in data.list" :key="item.id"  :style="{backgroundImage:'url('+indexofname(item.bank_name,0)+')'}">
					<view class=""  >
						<view class="box">
							{{item.payer_name}}
						</view>
						<view class="card">
							<text></text>{{item.bank_card_no}}
						</view>
					</view>
					<uni-icons class="itemsicons" type="trash-filled" color="#fff" size="25" @click="bindClick(item.ID,index)"></uni-icons>
				</view>
			</view>
		</view>
		<empty v-if="data.list.length==0"></empty>
		<view class="bottomButtons"></view>
		<view class="bottomButton">
			<view class="btns"  @click="$goURl('/pages/order/cardpay')">+添加银行卡</view>
		</view>
	</view>
</template>

<script setup>
	import {ref,reactive,getCurrentInstance} from "vue";
	import {onLoad,onShow,onPullDownRefresh,onReachBottom} from "@dcloudio/uni-app";
	const {proxy} = getCurrentInstance();
	const data = reactive({
		list:[],
		index:0,
		options:[
			{
				text: '删除',
				style: {
						backgroundColor: '#dd524d'
				}
			}
		],
		banklist:[
			{
							bg:'https://img.fubaozx.cn/static/oldImg/1699500237318.png',
							logo:'https://img.fubaozx.cn/static/oldImg/16995002972166.png',
							name:'交通'
						},
						{
							bg:'https://img.fubaozx.cn/static/oldImg/1699500321948.png',
							logo:'https://img.fubaozx.cn/static/oldImg/16995003487713.png',
							name:'农业'
						},
						{
							bg:'https://img.fubaozx.cn/static/oldImg/16995003831847.png',
							logo:'https://img.fubaozx.cn/static/oldImg/16995004134440.png',
							name:'建设'
						},
						{
							bg:'https://img.fubaozx.cn/static/oldImg/16995004477082.png',
							logo:'https://img.fubaozx.cn/static/oldImg/16995004719658.png',
							name:'招商'
						},

		]
	})
	onLoad((option)=>{

	})
	onShow(()=>{
		getbank()
	})
	onPullDownRefresh(()=> {
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		})
	onReachBottom(()=>{
		console.log('onReachBottom')
	})
  function bindClick(e,index){//删除银行卡
	console.log(e,index)
		proxy.$request({
			url: `api/pay_bank/`,
			method: 'DELETE',
			data:{
				id:e
			},
			success(res) {
				if(res.errno==0){
					data.list.splice(index,1)
				}
				uni.showToast({
					icon:"none",
					title:res.errmsg
				})
			}
		})
	}
	function swipeChange(e,index){//获取下标
		data.index=index
	}
	function indexofname(name,code){//判断银行卡
		let url=''
		data.banklist.forEach(item=>{
			if(name.indexOf(item.name)!=-1){
				if(code==0){
					url=item.bg
				}else{
					url=item.logo
				}
			}
		})
		if(!url){
			if(code==0){
							url='https://img.fubaozx.cn/static/oldImg/16995005119045.png'
						}else{
							url='https://img.fubaozx.cn/static/oldImg/16995005345195.png'
						}
		}
		return url
	}
	function setId(id){//截取后4位
		return id.substring(id.length-4)
	}
	function getbank (){//获取银行卡列表
	proxy.$request({
				url: `api/pay_bank/?page=1&size=50`,
				method: 'get',
				success(res) {
					data.list=res.data.data
				}
			})
		// proxy.$SHOPrequest({
		// 	url: `business/bank/?page=1&size=999`,
		// 	method: 'get',
		// 	success(res) {
		// 		data.list=res.data.data
		// 	}
		// })
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #ffffff;
	}
	.container{
		padding: 30upx;
		.content{
			.list{
				.item{
					display: flex;
					height: 210upx;
					padding: 30upx;
					margin-bottom: 30upx;
					justify-content: space-between;
					background-image: url('https://img.fubaozx.cn/static/oldImg/16995005635900.png');
					background-repeat: no-repeat;
					background-size: 100% 100%;
					border-radius: 30upx;
					.box{
						display: flex;
						justify-content: flex-start;
						align-items: center;
						height: 80upx;
						font-size: 16px;
						font-family: PingFang SC, PingFang SC-Bold;
						font-weight: 700;
						text-align: left;
						color: #ffffff;
						image{
							width: 80upx;
							height: 80upx;
							margin-right: 20upx;
						}
					}
					.card{
						height: 80upx;
						line-height:80upx ;
						font-size: 14px;
						font-family: PingFang SC, PingFang SC-Bold;
						font-weight: 700;
						text-align: left;
						color: #ffffff;
						text{
							color: rgba(255,255,255,0.50);
						}
					}
				}
			}

		}
		.btns{
			width: calc(100% - 40upx);
			text-align: center;
			height: 45px;
			line-height: 45px;
			background: #ffffff !important;
			border: 1px solid $color1;
			border-radius: 24px;
			color: $color1;
			font-size: 16px;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
		}
	}
</style>
